/* 色阶*/
:root {
  /* 白色 */
  --dx-color-white: #ffffff;
  --dx-color-white-d1: #f5f9fc;
  --dx-color-white-d2: #eee;
  --dx-color-white-d3: #dadada;
  --dx-color-white-d4: #ccc;
  --dx-color-white-d5: #bdbdbd;

  /* 黑色 */
  --dx-color-black: #000;
  --dx-color-black-l1: #171a1d;
  --dx-color-black-l2: #27273f;
  --dx-color-black-l3: #515167;
  --dx-color-black-l4: #676b6b;
  --dx-color-black-l5: #989898;

  /* 绿色 */
  --dx-color-green-d2: #00ae65;
  --dx-color-green-d1: #00c37d;
  --dx-color-green: #54d781;
  --dx-color-green-l1: #cff4e4;
  --dx-color-green-l2: #d8f3e5;
  --dx-color-green-l3: #e1fffa;

  /* 黄色 */
  --dx-color-yellow-d2: #ffa940;
  --dx-color-yellow-d1: #ffac24;
  --dx-color-yellow: #ffc140;
  --dx-color-yellow-l1: #ffce93;
  --dx-color-yellow-l2: #ffe6b1;
  --dx-color-yellow-l3: #ffefd0;

  /* 蓝色 */
  --dx-color-blue-d1: #0062ff;
  --dx-color-blue: #007fff;
  --dx-color-blue-l2: #cce5ff;
  --dx-color-blue-l3: #f2f6ff;

  /* 红色 */
  --dx-color-red-d1: #ff3d37;
  --dx-color-red: #ff3f51;
  --dx-color-red-l1: #ed4343;
  --dx-color-red-l2: #ff6460;
  --dx-color-red-l3: #ffeaeb;

  /* 橙色 */
  --dx-color-orange-d2: #ff7140;
  --dx-color-orange-d1: #ed7243;
  --dx-color-orange: #ff791d;
  --dx-color-orange-l1: #ff8200;
  --dx-color-orange-l2: #ff9200;
  --dx-color-orange-l3: #ffdbb6;
}

/* 业务无关 */
:root {
  /* 业务色 */
  --dx-color-danger: var(--dx-color-red);
  --dx-color-warning: var(--dx-color-orange);
  --dx-color-success: var(--dx-color-green);

  /* 字体大小 */
  --dx-size-text-xs: 10px;
  --dx-size-text-sm: 12px;
  --dx-size-text-md: 14px;
  --dx-size-text-lg: 16px;
  --dx-size-text-xl: 18px;

  /* 标题大小 */
  --dx-size-title-xs: var(--dx-font-size-md);
  --dx-size-title-sm: var(--dx-font-size-lg);
  --dx-size-title-md: var(--dx-font-size-xl);
  --dx-size-title-lg: 20px;
  --dx-size-title-xl: 24px;

  /* 间隔值 */
  --dx-size-gap-0: 0;
  --dx-size-gap-xxs: 4px;
  --dx-size-gap-xs: 6px;
  --dx-size-gap-sm: 8px;
  --dx-size-gap-md: 12px;
  --dx-size-gap-lg: 16px;
  --dx-size-gap-xl: 20px;
  --dx-size-gap-xxl: 30px;

  /* 动效时长 */
  --dx-time-duration-sm: 0.2s;
  --dx-time-duration-md: 0.3s;
  --dx-time-duration-lg: 0.5s;

  /* 边框弧度 */
  --dx-size-radius-xs: 4px;
  --dx-size-radius-sm: 8px;
  --dx-size-radius-md: 12px;
  --dx-size-radius-lg: 16px;
  --dx-size-radius-xl: 22px;
  --dx-size-radius-max: 900px;
}

/* 业务 前景3种  背景3种 */
:root {
  /* 颜色业务 黑色 只定义纯色，其他作为皮肤定义 */
  --dx-color-text-black: var(--dx-color-black);
  --dx-color-bg-black: var(--dx-color-black);


  /* 颜色业务 白色 只定义纯色，其他作为皮肤定义 */
  --dx-color-text-white: var(--dx-color-white);
  --dx-color-bg-white: var(--dx-color-white);


  /* 颜色业务 蓝色 */
  --dx-color-text-blue-d1: var(--dx-color-blue-d1);
  --dx-color-text-blue: var(--dx-color-blue);
  --dx-color-text-blue-l1: var(--dx-color-blue-l2);
  --dx-color-bg-blue-d1: var(--dx-color-blue-l1);
  --dx-color-bg-blue: var(--dx-color-blue-l2);
  --dx-color-bg-blue-l1: var(--dx-color-blue-l3);

  /* 颜色业务 绿色 */
  --dx-color-text-green-d1: var(--dx-color-green-d2);
  --dx-color-text-green: var(--dx-color-green-d1);

  --dx-color-bg-green-d1: var(--dx-color-green-l1);
  --dx-color-bg-green: var(--dx-color-green-l2);
  --dx-color-bg-green-l1: var(--dx-color-green-l3);

  /* 颜色业务 红色 */
  --dx-color-text-red-d1: var(--dx-color-red-d2);
  --dx-color-text-red: var(--dx-color-red-d1);
  --dx-color-text-red-l1: var(--dx-color-red);
  --dx-color-bg-red-d1: var(--dx-color-red-l1);
  --dx-color-bg-red: var(--dx-color-red-l2);
  --dx-color-bg-red-l1: var(--dx-color-red-l3);

  /* 颜色业务 黄色 */
  --dx-color-text-yellow-d1: var(--dx-color-yellow-d2);
  --dx-color-text-yellow: var(--dx-color-yellow-d1);
  --dx-color-text-yellow-l1: var(--dx-color-yellow);
  --dx-color-bg-yellow-d1: var(--dx-color-yellow-l1);
  --dx-color-bg-yellow: var(--dx-color-yellow-l2);
  --dx-color-bg-yellow-l1: var(--dx-color-yellow-l3);

  /* 颜色业务 橙色 */
  --dx-color-text-orange-d1: var(--dx-color-orange-d2);
  --dx-color-text-orange: var(--dx-color-orange-d1);
  --dx-color-text-orange-l1: var(--dx-color-orange);
  --dx-color-bg-orange-d1: var(--dx-color-orange-l1);
  --dx-color-bg-orange: var(--dx-color-orange-l2);
  --dx-color-bg-orange-l1: var(--dx-color-orange-l3);
}

/* 皮肤 浅色系 */
:root {
  /* 前景色 */
  --dx-color-text-d1: var(--dx-color-black-l1);
  --dx-color-text: var(--dx-color-black-l2);
  --dx-color-text-l1: var(--dx-color-black-l4);
  --dx-color-text-l2: var(--dx-color-black-l5);

  /* 背景色 */
  --dx-color-bg-d1: var(--dx-color-white);
  --dx-color-bg: var(--dx-color-white-d1);
  --dx-color-bg-l1: var(--dx-color-white-d3);

  /* 主题色 */
  --dx-color-text-primary-d1: var(--dx-color-text-green-d);
  --dx-color-text-primary: var(--dx-color-text-green);
  --dx-color-text-primary-l1: var(--dx-color-text-green-l);
  --dx-color-bg-primary-d1: var(--dx-color-bg-green-d);
  --dx-color-bg-primary: var(--dx-color-bg-green);
  --dx-color-bg-primary-l1: var(--dx-color-bg-greenl);
  --dx-color-bg-primary-gradient: linear-gradient(270deg, var(--dx-color-text-primary) 0%, var(--dx-color-text-primary-l) 100%);

  /* 其他色 */
  --dx-color-gold: var(--dx-color-yellow-d1);
  --dx-color-score-l1: var(--dx-color-green);
  --dx-color-score-l2: var(--dx-color-yellow-d2);
  --dx-color-score-l3: var(--dx-color-orange-d2);

  /* 边框颜色 */
  --dx-color-border: var(--dx-color-white-d1);
  --dx-border: solid 1px var(--dx-color-border);
}

/* 黑色系覆盖 */
:root.van-theme-dark {}
